.m-article-content {
    line-height: $article-line-height;
    h1, h2, h3, h4, h5, h6 {
        margin: $content-gap * 2 0 $content-gap * .5 0;
    }
    h1, h2 {
        padding: 0 0 $base-font-size * .3 0;
        border: 0 dashed $border-color;
        border-bottom-width: 2px;
        margin-bottom: $content-gap;
    }

    p {
        margin: $content-gap 0;
    }

    blockquote {
        padding: 0 0 0 $spacing-unit / 2;
        border: 0 solid $border-color;
        border-left-width: 4px;
        margin: $content-gap 0;
        font-size: $small-font-size;
        color: $text-color-l;
        p {
            margin: $content-gap * .5 0;
        }
        > :last-child {
            margin-bottom: 0;
        }
    }

    img:not(.emoji) {
        max-width: 100%;
        max-height: 600px;
        vertical-align: middle;
    }
    .emoji {
        display: inline-block;
        vertical-align: text-bottom;
        width:  $base-font-size * $article-line-height * .7;
        height:  $base-font-size * $article-line-height * .7;
    }

    code {
        padding: $code-font-size * .2 $code-font-size * .5;
        border-radius: $code-font-size * .4;
        background-color: $text-background-color;
        span {
            padding: 0;
            margin: 0;
        }
    }
    pre {
        display: block;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        margin: $content-gap 0;
        border-radius: $code-font-size * .4;;
        background-size: auto $code-font-size * $code-line-height * 2;
        background-origin: content-box;
        & > code {
            font-size: $code-font-size;
            padding: $code-font-size;
            margin: 0;
            display: block;
            line-height: $code-line-height;
            background-color: transparent;
        }
    }
    figure {
        margin: $content-gap 0;
        &:before {
            content: attr(data-lang);
            background-color: $text-background-color;
            display: block;
            border-top-left-radius: $code-font-size / 2;
            border-top-right-radius: $code-font-size / 2;
            padding: $code-font-size / 2 $code-font-size $code-font-size / 2 0;
            color: $decorate-color;
            font-weight: $bold-font-weight;
            font-size: $base-font-size;
            text-align: right;
            text-transform: uppercase;
        }
        & > pre {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            margin: 0;
            & > code {
                padding-top: 0;
            }
        }
    }

    ul, ol {
        margin: $content-gap 0 $content-gap $spacing-unit;
        li {
            margin: 0;
            p { margin: 0; }
        }
    }
    dl {
       margin: $content-gap 0;
       dt, dd {
           margin: 0;
           p { margin: 0; }
       }
       dt {
           font-weight: $bold-font-weight;
       }
       dd {
           margin-left: 2em;
       }
    }

    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    	margin: $content-gap 0;
        border-collapse: collapse;
    	th, td {
            border: 1px solid $border-color;
            padding: $base-font-size * .5;
        }
        thead, tbody {
            border: 1px solid $border-color;
        }
        tbody > tr:nth-child(even) {
            background-color: $text-background-color;
        }
    }

    hr {
        border: 0 dashed $border-color;
        border-top-width: 2px;
    	margin: $base-font-size 0;
    }
}
